<template>
<div class="page page5" :style="index>=0&&'background: #fff;'">
  <div class="contant" v-show="index<2">
    <div class="head" :class="renderClass()" />
    <div @click="$emit('setPage',1)" class="btn" />
    <div class="main" :class="[1].includes(index)?'m4':'m3'" @click="mainClick" />
    <!-- index -->
    <div class="index">
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="show&&index===-1" class="text" />
      </transition>
    </div>
    <!-- 1 -->
    <div class="a1">
      <transition name="fade" @after-enter="$set(a1,0,true)">
        <div v-show="show&&index===0" class="banner" />
      </transition>
      <transition name="fade-long" @after-enter="showBtn = true">
        <div v-show="a1[0]&&index===0" class="t1" />
      </transition>
    </div>
    <!-- 2 -->
    <div class="a2">
      <transition name="fade" @after-enter="$set(a2,0,true)">
        <div v-show="show&&index===1&&!showPrev" class="banner" />
      </transition>
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="a2[0]&&index===1&&!showPrev" class="t1" />
      </transition>
      <div :style="`${showPrev?'opacity:1':'opacity:0'}`" @click="mainClick" style="z-index:5000;" class="scroll-wrapper">
        <div style="height:100%;width:100%;position:relative;left:0;top;0;" ref="scroll">
          <div class="scroll-contianer">
            <div class="img" style="display:block;" v-for="(v,i) in 12" :key="i">
              <img :src="imgRequire(v)" height="100%" width="100%"/>
            </div>
          </div>
        </div>
      </div>
      <div class="closs" @click="closeBtn" v-show="showPrev" />
      <div v-show="a2[0]&&index===1&&showPrev" class="icon-box">
        <span v-for="(v,i) in 12" :key="i" class="icon" :class="pageIndex===i?'act':'unact'" />
      </div>
    </div>
    <div class="bottom" />
    <div class="flower" @click="next" v-show="index===-1&&showBtn"/>
    <div class="flower" @click="next" v-show="index>=0&&index<=2&&!showPrev&&showBtn" />
    <div class="flowerP" @click="prev" v-show="index>=0&&!showPrev&&showBtn" />
  </div>
  <transition name="slide">
    <div v-show="show&&index===2" class="text" />
  </transition>
</div>
</template>

<script>
const RATE = window.screen.height/window.screen.width
import BScroll from 'better-scroll'
export default {
  name: 'page5',
  props:{
    show: {
      type:Boolean,
      default(){
        return false
      }
    },
  },
  watch:{
    show(){
      if (this.show) {
        this.index = -1
        this.showBtn = false
      }
    }
  },
  data() {
    return {
      a1: [false],
      a2: [false],
      a3: [false, false, false, false, false],
      a4: [false],
      index: -1,
      showPrev: false,
      pageIndex: 0,
      showBtn:false
    }
  },
  created(){
  },
  methods: {
    scrollInit() {
      if (this.myScroll) {
        return
      }
      this.myScroll = new BScroll(this.$refs.scroll, {
        scrollX: true,
        probeType: 3,
        momentum: false,
        stopPropagation: true,
        bindToWrapper: true,
        bounce: false,
        snap: {
          loop: false,
          threshold: 1,
          easing: {
            style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
          }
        },
        click: true,
        tap: true
      })
      this.myScroll.on('scrollEnd', () => {
        console.log(this.myScroll.currentPage.pageX);
        this.pageIndex = this.myScroll.currentPage.pageX>=12?11:this.myScroll.currentPage.pageX
      })
    },
    closeBtn() {
      this.showPrev = false
      this.a2.forEach((v, i) => {
        this.$set(this.a2, i, false)
      })
    },
    next() {
      this.index++
      if (this.index >= 2) {
        this.$emit('setPage',5)
      }
      this.closs()
    },
    imgRequire(v) {
      return require(`@/assets/ipad/prev/${v}.jpg`)
    },
    prev() {
      this.index--
        this.closs()
    },
    mainClick() {
      if (this.index !== 1) {
        return
      }
      this.scrollInit()
      this.showPrev = true
    },
    set() {
      const setTime = setTimeout(() => {
        this.$set(this.a5, 1, false)
        clearTimeout(setTime)
      }, 2000)
    },
    closs() {
      let arr = ['a1', 'a2']
      let i = this.index === 0 ? 1 : this.index
      arr.forEach(v => {
        if (v !== `a${i}`) {
          this[v].forEach((res, i) => {
            this.$set(this[v], i, false)
          })
        }
      })
      this.showBtn = false
    },
    renderClass() {
      if ([0].includes(this.index)) {
        return 'h1'
      } else if ([1].includes(this.index)) {
        return 'h2'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
@keyframes shin
  0%
    opacity: 0;
  50%
    opacity: 1;
.page5
  background: url('~assets/b1.jpg') no-repeat;
  background-size: 100% 100%;
  .contant
    width: 100vw;
    height: calc(100vw*(950/640));
    position: absolute;
    top: 50%;
    margin-top: calc(-50vw*(950/640));
    overflow: hidden;
    .head
      position: absolute;
      top: 0;
      left: calc(100vw*(16/640));
    .h1
      width: calc(100vw*(140/640));
      height: calc(100vw*(35/640));
      background: url('~assets/h23.png') no-repeat;
      background-size: 100% 100%;
    .h2
      width: calc(100vw*(209/640));
      height: calc(100vw*(35/640));
      background: url('~assets/h24.png') no-repeat;
      background-size: 100% 100%;
    .main
      width: calc(100vw*(608/640));
      height: calc(100vw*(829/640));
      position: absolute;
      left: 50%;
      top: calc(100vw*(53/640));
      margin-left: calc(-50vw*(608/640));
    .m3
      background: url('~assets/m3.png') no-repeat;
      background-size: 100% 100%;
    .m4
      background: url('~assets/m4.png') no-repeat;
      background-size: 100% 100%;
    .fade-enter-active
      transition: all 0.5s cubic-bezier(1, 0.5, 0.3, 0.1);
      opacity: 1;
    .fade-enter
      opacity: 0;
    .fade-long-enter-active
      transition: all 1s cubic-bezier(1, 0.5, 0.3, 0.1);
      opacity: 1;
    .fade-long-enter
      opacity: 0;
    .fade-inout-enter-active,.fade-inout-leave-active
      animation: fade 4s
    .zoom-enter-active
      transition: all 0.5s cubic-bezier(0.1,0.3,0.5,1);
      transform: scale(1);
      opacity: 1;
    .zoom-enter
      transform: scale(2);
      opacity: 0;
    @keyframes fade
      0%
        opacity: 0;
      40%
        opacity: 1;
      60%
        opacity: 1;
      100%
        opacity: 0;
    .index
      .slide-enter-active
        transition: all 2s;
      .slide-enter
        transform: translateX(calc(-100vw*(572/640)));
        opacity: 0;
      .text
        width: calc(100vw*(501/640));
        height: calc(100vw*(213/640));
        position: absolute;
        top: calc(100vw*(360/640));
        left: calc(100vw*(71/640));
        background: url('~assets/t5.png') no-repeat;
        background-size: 100% 100%;
    .a1
      .banner
        width: calc(100vw*(449/640));
        height: calc(100vw*(384/640));
        position: absolute;
        top: calc(100vw*(141/640));
        left: calc(100vw*(95/640));
        background: url('~assets/b1_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(298/640));
        height: calc(100vw*(23/640));
        position: absolute;
        top: calc(100vw*(634/640));
        left: calc(100vw*(171/640));
        background: url('~assets/b1_2.png') no-repeat;
        background-size: 100% 100%;
    .a2
      .fade-shot-enter-active
        transition: all 0.2s cubic-bezier(1, 0.5, 0.3, 0.1);
        opacity: 1;
      .fade-shot-enter
        opacity: 0;
      .banner
        width: calc(100vw*(184/640));
        height: calc(100vw*(551/640));
        position: absolute;
        top: calc(100vw*(100/640));
        left: calc(100vw*(90/640));
        background: url('~assets/b2_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(165/640));
        height: calc(100vw*(480/640));
        position: absolute;
        top: calc(100vw*(276/640));
        right: calc(100vw*(90/640));
        background: url('~assets/b2_2.png') no-repeat;
        background-size: 100% 100%;
      .scroll-wrapper
        width: calc(100vw*(580/640));
        height: calc(100vw*(797/640));
        overflow: hidden;
        top: calc(100vw*(70/640));
        left: calc(100vw*(30/640));
        position: relative;
        z-index: 1000;
        .scroll-contianer
          width: calc(100vw*(6960/640));
          height: calc(100vw*(797/640));
          z-index: 1001;
          .img
            width: calc(100vw*(580/640));
            height: calc(100vw*(797/640));
            float: left;
            z-index: 1001;
      .closs
        width: calc(100vw*(18/640));
        height: calc(100vw*(18/640));
        position: absolute;
        top: calc(100vw*(106/640) - 30px);
        right: calc(100vw*(83/640) - 30px);
        background: url('~assets/close.png') no-repeat;
        background-size: 100% 100%;
        z-index: 5001;
        border: 30px solid transparent;
        color:transparent;
      .icon-box
        width: 100vw;
        height: calc(100vw*(10/640));
        text-align: center;
        position: absolute;
        top: calc(100vw*(819/640));
        z-index: 5001;
        .icon
          display: inline-block;
          width: calc(100vw*(10/640));
          height: calc(100vw*(10/640));
          margin: 0 calc(100vw*(3.5/640));
        .act
          background: url('~assets/act.png') no-repeat;
          background-size: 100% 100%;
        .unact
          background: url('~assets/unact.png') no-repeat;
          background-size: 100% 100%;
    .bottom
      width: calc(100vw*(608/640));
      height: calc(100vw*(56/640));
      position: absolute;
      left: 50%;
      top: calc(100vw*(886/640));
      margin-left: calc(-50vw*(608/640));
      background: url('~assets/b3.png') no-repeat;
      background-size: 100% 100%;
    .flower,.flowerP
      width: calc(100vw*(33/640));
      height: calc(100vw*(33/640));
      position: absolute;
      top: calc(100vw*(826/640));
      opacity: 0;
      animation:shin linear 2s infinite both;
      z-index: 5001;
      border: 30px solid transparent;
      color:transparent;
      margin-top: -30px;
    .flower
      background: url('~assets/f3.png') no-repeat;
      background-size: 100% 100%;
      right: calc(100vw*(97/640));
      margin-right: -30px;
    .flowerP
      background: url('~assets/f4.png') no-repeat;
      background-size: 100% 100%;
      left: calc(100vw*(97/640));
      margin-left: -30px;
@media only screen and (device-aspect-ratio:3/4),
only screen and (device-aspect-ratio:512/683)
  .page5
    height: 100%;
    .contant
      height: 100%;
      top: -50%;
      transform: translateY(50%);
      margin-top: 0;
      .head
        top: calc(100%*(9/800));
      .main
        height: calc(100%*(664/800));
        top: calc(100%*(63/800));
      .m3
        background: url('~assets/ipad/m3.png') no-repeat;
        background-size: 100% 100%;
      .m4
        background: url('~assets/ipad/m4.png') no-repeat;
        background-size: 100% 100%;
      .index
        .text
          width: calc(100vw*(495/640));
          height: calc(100%*(212/800));
          top: calc(100%*(276/800));
          left: calc(100vw*(73/640));
      .a1
        .banner
          width: calc(100vw*(449/640));
          height: calc(100%*(384/800));
          top: calc(100%*(100/800));
          left: calc(100vw*(95/640));
          background: url('~assets/ipad/b1_1.png') no-repeat;
          background-size: 100% 100%;
        .t1
          width: calc(100vw*(233/640));
          height: calc(100%*(30/800));
          top: calc(100%*(567/800));
          left: calc(100vw*(203/640));
          background: url('~assets/ipad/b1_2.png') no-repeat;
          background-size: 100% 100%;
      .a2
        height: 100%;
        .banner
          width: calc(100vw*(182/640));
          height: calc(100%*(446/800));
          top: calc(100%*(90/800));
          left: calc(100vw*(65/640));
          background: url('~assets/ipad/b2_1.png') no-repeat;
          background-size: 100% 100%;
        .t1
          width: calc(100vw*(165/640));
          height: calc(100%*(397/800));
          position: absolute;
          top: calc(100%*(228/800));
          right: calc(100vw*(90/640));
          background: url('~assets/ipad/b2_2.png') no-repeat;
          background-size: 100% 100%;
        .scroll-wrapper
          width: calc(100vw*(482/640));
          height: calc(100%*(663/800));
          top: calc(100%*(62/800));
          left: calc(100vw*(78/640));
          .scroll-contianer
            width: calc(100vw*(5784/640));
            height: 100%;
            z-index: 1001;
            .img
              width: calc(100vw*(482/640));
              height: 100%;
              float: left;
              z-index: 1001;
        .closs
          width: calc(100vw*(19/640));
          height: calc(100%*(20/800));
          top: calc(100%*(85/800) - 30px);
          right: calc(100vw*(110/640) - 30px);
          z-index: 5001;
        .icon-box
          top: calc(100%*(670/800));
      .bottom
        height: calc(100%*(56/800));
        top:calc(100%*(735/800));
        background: url('~assets/ipad/b3.png') no-repeat;
        background-size: 100% 100%;
      .flower,.flowerP
        top: calc(100%*(673/800));
      .flower
        right: calc(100vw*(108/640));
      .flowerP
        left: calc(100vw*(108/640));
</style>
